<template>
    <div class="main" style="width: 100%;height:100%;overflow-y: auto;" >
        <ul  style="list-style-type: none; padding-top: 20px;padding-left: 20px; margin: 0px;">
            <li    style="background-color: #f3f4f8;width: 640px;border-radius: 10px;"
                v-for="(item, index) in Store.$state.Question.Editor"
                :key="index"
                >
                <h1 style="height:20px;font-size: 18px;position: relative;left:7px;top:20px;">{{ index+1 }}、</h1>
                <el-form :model="Store.$state.Question.Editor[index]" ref="formRef" style="position: relative;left:30px;margin-bottom: 10px;">
                    <!-- 题目 -->
                    <el-form-item label="题目" prop="content" class="custom-form-item">
                        <el-input
                            v-model="Store.$state.Question.Editor[index].content"
                            style="width: 93%;"
                            :autosize="{ minRows: 2 }"
                            type="textarea"
                            placeholder="题目"
                        />
                    </el-form-item>
                    <!-- 图片 -->
                    <el-form-item label="图片" prop="image" class="custom-form-item">
                      <el-upload
                          action="#"
                          list-type="picture-card"
                          :auto-upload="false"
                          v-model:file-list="Store.$state.Question.Editor[index].image"
                          :on-preview="handlePictureCardPreview"
                          :on-remove="handleRemove"
                        >
                          <el-icon><Plus /></el-icon>
                        </el-upload>

                        <el-dialog v-model="dialogVisible">
                            <img w-full :src="dialogImageUrl" alt="Preview Image"  style="max-width: 650px;max-height:600px;"/>
                        </el-dialog>
                    </el-form-item>
                    <!-- 答案 -->
                    <el-form-item label="答案" prop="answer" class="custom-form-item">
                        <el-input
                            v-model="Store.$state.Question.Editor[index].answer"
                            style="width: 93%;margin-bottom: 10px;"
                            :autosize="{ minRows: 1 }"
                            type="textarea"
                            placeholder="答案"
                        />
                    </el-form-item>
                   <!--  添加按钮 -->
                   <el-button type="primary" plain @click="addQuestionToConfirm(index)" style="width: 100px;margin-top: 0px;position: relative;top:-10px;left:500px;">添加预览</el-button>
                </el-form>
            </li>
        </ul>
    </div>
</template>
<script setup lang="ts">
import { useCounterStore } from '@/stores/counter';
const Store = useCounterStore();
import { ref } from 'vue'

import { Plus } from '@element-plus/icons-vue'
import type { UploadProps, UploadUserFile } from 'element-plus'
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
//图片删除
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    console.log('之前前editor为：'+JSON.stringify(Store.$state.Question.Editor))
    const questionIndex = Store.$state.Question.Editor.findIndex(
    (item) => item.image === uploadFiles
  );
  if (questionIndex !== -1) {
    // 找到当前图片在题目中的索引
    const imageIndex = Store.$state.Question.Editor[questionIndex].image.findIndex(
      (img) => img.uid === uploadFile.uid
    );
    if (imageIndex !== -1) {
      // 调用 Store 的 action 删除图片
      Store.deleteEditorImage(questionIndex, imageIndex);
    }
  }
  console.log('当前editor为：'+JSON.stringify(Store.$state.Question.Editor))
}
//预览
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}
//添加到预览区
function addQuestionToConfirm(index:Number){
  Store.addQuestionToConfirm(index);
}

</script>
<style scoped>

 
div[style*="overflow-y: auto"]::-webkit-scrollbar {
  width: 6px;
  background-color: #f3f4f8;
}
 
div[style*="overflow-y: auto"]::-webkit-scrollbar-track {
    background: #e3e6e9e3;
}
 
div[style*="overflow-y: auto"]::-webkit-scrollbar-thumb {
  background: #c2d0df;
  border-radius: 6px;
}
 
div[style*="overflow-y: auto"]::-webkit-scrollbar-thumb:hover {
  background: #a0a0a0;
}
</style>